<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>淘房 - 登录</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${path}/css/font-awesome.css?v=4.4.0" rel="stylesheet">


    <link href="${path}/css/animate.css" rel="stylesheet">
    <link href="${path}/css/style.css?v=4.1.0" rel="stylesheet">

    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>

    <%--    <!--[if lt IE 9]>--%>
    <%--    <meta http-equiv="refresh" content="0;ie.html" />--%>
    <%--    <![endif]-->--%>
    <%--    <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>--%>
    <%--    <script type="text/javascript">--%>
    <%--        !(function(window, document) {--%>
    <%--            function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数--%>
    <%--                this.options = { //默认options参数值--%>
    <%--                    id: "", //容器Id--%>
    <%--                    canvasId: "verifyCanvas", //canvas的ID--%>
    <%--                    width: "100", //默认canvas宽度--%>
    <%--                    height: "30", //默认canvas高度--%>
    <%--                    type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母--%>
    <%--                    code: ""--%>
    <%--                }--%>

    <%--                if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型--%>
    <%--                    for(var i in options) { //根据传入的参数，修改默认参数值--%>
    <%--                        this.options[i] = options[i];--%>
    <%--                    }--%>
    <%--                }else{--%>
    <%--                    this.options.id = options;--%>
    <%--                }--%>

    <%--                this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");--%>
    <%--                this.options.letterArr = getAllLetter();--%>

    <%--                this._init();--%>
    <%--                this.refresh();--%>
    <%--            }--%>

    <%--            GVerify.prototype = {--%>
    <%--                /**版本号**/--%>
    <%--                version: '1.0.0',--%>

    <%--                /**初始化方法**/--%>
    <%--                _init: function() {--%>
    <%--                    var con = document.getElementById(this.options.id);--%>
    <%--                    var canvas = document.createElement("canvas");--%>
    <%--                    this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";--%>
    <%--                    this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";--%>
    <%--                    canvas.id = this.options.canvasId;--%>
    <%--                    canvas.width = this.options.width;--%>
    <%--                    canvas.height = this.options.height;--%>
    <%--                    canvas.style.cursor = "pointer";--%>
    <%--                    canvas.innerHTML = "您的浏览器版本不支持canvas";--%>
    <%--                    con.appendChild(canvas);--%>
    <%--                    var parent = this;--%>
    <%--                    canvas.onclick = function(){--%>
    <%--                        parent.refresh();--%>
    <%--                    }--%>
    <%--                },--%>

    <%--                /**生成验证码**/--%>
    <%--                refresh: function() {--%>
    <%--                    this.options.code = "";--%>
    <%--                    var canvas = document.getElementById(this.options.canvasId);--%>
    <%--                    if(canvas.getContext) {--%>
    <%--                        var ctx = canvas.getContext('2d');--%>
    <%--                    }else{--%>
    <%--                        return;--%>
    <%--                    }--%>

    <%--                    ctx.textBaseline = "middle";--%>

    <%--                    ctx.fillStyle = randomColor(180, 240);--%>
    <%--                    ctx.fillRect(0, 0, this.options.width, this.options.height);--%>

    <%--                    if(this.options.type == "blend") { //判断验证码类型--%>
    <%--                        var txtArr = this.options.numArr.concat(this.options.letterArr);--%>
    <%--                    } else if(this.options.type == "number") {--%>
    <%--                        var txtArr = this.options.numArr;--%>
    <%--                    } else {--%>
    <%--                        var txtArr = this.options.letterArr;--%>
    <%--                    }--%>

    <%--                    for(var i = 1; i <= 4; i++) {--%>
    <%--                        var txt = txtArr[randomNum(0, txtArr.length)];--%>
    <%--                        this.options.code += txt;--%>
    <%--                        ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小--%>
    <%--                        ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色--%>
    <%--                        ctx.shadowOffsetX = randomNum(-3, 3);--%>
    <%--                        ctx.shadowOffsetY = randomNum(-3, 3);--%>
    <%--                        ctx.shadowBlur = randomNum(-3, 3);--%>
    <%--                        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";--%>
    <%--                        var x = this.options.width / 5 * i;--%>
    <%--                        var y = this.options.height / 2;--%>
    <%--                        var deg = randomNum(-30, 30);--%>
    <%--                        /**设置旋转角度和坐标原点**/--%>
    <%--                        ctx.translate(x, y);--%>
    <%--                        ctx.rotate(deg * Math.PI / 180);--%>
    <%--                        ctx.fillText(txt, 0, 0);--%>
    <%--                        /**恢复旋转角度和坐标原点**/--%>
    <%--                        ctx.rotate(-deg * Math.PI / 180);--%>
    <%--                        ctx.translate(-x, -y);--%>
    <%--                    }--%>
    <%--                    /**绘制干扰线**/--%>
    <%--                    for(var i = 0; i < 4; i++) {--%>
    <%--                        ctx.strokeStyle = randomColor(40, 180);--%>
    <%--                        ctx.beginPath();--%>
    <%--                        ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));--%>
    <%--                        ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));--%>
    <%--                        ctx.stroke();--%>
    <%--                    }--%>
    <%--                    /**绘制干扰点**/--%>
    <%--                    for(var i = 0; i < this.options.width/4; i++) {--%>
    <%--                        ctx.fillStyle = randomColor(0, 255);--%>
    <%--                        ctx.beginPath();--%>
    <%--                        ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);--%>
    <%--                        ctx.fill();--%>
    <%--                    }--%>
    <%--                },--%>

    <%--                /**验证验证码**/--%>
    <%--                validate: function(code){--%>
    <%--                    var code = code.toLowerCase();--%>
    <%--                    var v_code = this.options.code.toLowerCase();--%>
    <%--                    console.log(v_code);--%>
    <%--                    if(code == v_code){--%>
    <%--                        return true;--%>
    <%--                    }else{--%>
    <%--                        this.refresh();--%>
    <%--                        return false;--%>
    <%--                    }--%>
    <%--                }--%>
    <%--            }--%>
    <%--            /**生成字母数组**/--%>
    <%--            function getAllLetter() {--%>
    <%--                var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";--%>
    <%--                return letterStr.split(",");--%>
    <%--            }--%>
    <%--            /**生成一个随机数**/--%>
    <%--            function randomNum(min, max) {--%>
    <%--                return Math.floor(Math.random() * (max - min) + min);--%>
    <%--            }--%>
    <%--            /**生成一个随机色**/--%>
    <%--            function randomColor(min, max) {--%>
    <%--                var r = randomNum(min, max);--%>
    <%--                var g = randomNum(min, max);--%>
    <%--                var b = randomNum(min, max);--%>
    <%--                return "rgb(" + r + "," + g + "," + b + ")";--%>
    <%--            }--%>
    <%--            window.GVerify = GVerify;--%>
    <%--        })(window, document);--%>
    <%--    </script>--%>
    <%--    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>--%>

    <style>
        .gray-bg{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: url(http://${path2}/img/loginimg.jpg)  no-repeat center 0px;
            background-size: cover;

            background-position: center 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size: cover;

        }
    </style>

</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div style="margin-top: 50%"></div>
    <h3>欢迎登录 淘房</h3>
    <form id="login" class="m-t" role="form" method="post">
        <div class="form-group">
            <input type="text" class="form-control" id="account" name="account" placeholder="用户名" required=""
                   onblur="checkName()">
            <span id="account_id">请输入用户名</span>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="password" name="password" placeholder="密码" required=""
                   >
            <span id="password_id">请输入密码</span>
        </div>


        <%--                <div class="form-group">--%>
        <%--                        <div id="v_container" style="width: 300px;height: 60px;"></div>--%>
        <%--                        <input type="text" class="form-control" id="code_input" value="" placeholder="请输入验证码"/>--%>
        <%--                        <span id="verify_id">*</span>--%>
        <%--                </div>--%>


        <%--                <div>--%>
        <%--                    <label for="login">选择身份</label>--%>
        <%--                    <select class="form-control" id="identity" onclick="checkpwd()">--%>
        <%--                        <option>租客</option>--%>
        <%--                        <option>经纪人</option>--%>
        <%--                        <option>房东</option>--%>
        <%--                    </select>--%>
        <%--                </div>--%>


        <br>
        <input type="button" id="my_button" class="btn btn-primary block full-width m-b" onclick="return checkPwd()"
               value="登 录">


        <p class="text-muted text-center"><a href="${path}/register/check">注册一个新账号</a>
        </p>

    </form>
</div>


<!-- 全局js -->

<script src="${path}/plugins/jquery-3.4.1.js"></script>
<script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>

    function checkAll() {
        if (checkName()) {
            checkPwd()
        }
    }

    function checkName() {
        let name = $("#account").val();
        let datas = {"account": name}
        $.post('${path}/login/selectaccount', datas, function (data) {
            if (data.code == 200) {
                document.getElementById("account_id").innerText = "用户名可用"
            } else {
                document.getElementById("account_id").innerText = "用户名不存在"
            }
        })
    }

    function checkPwd() {
        let name = $("#account").val();
        let password = $("#password").val();
        let datas = {"account": name, "password": password};
        $.post('${path}/login/selectpassword', datas, function (data) {
            if (data.code == 200) {
                document.getElementById("password_id").innerText = "密码正确"
                $.ajax({
                    type: 'post',
                    url: '${path}/login/success?account=' + name,
                    data: datas,
                    contentType: 'application/json;charset=utf-8',
                    success: function (data) {
                        window.location.href = '${path}/login/success?account=' + name;
                    }
                })

            } else {
                document.getElementById("password_id").innerText = "密码错误"
            }
        })
    }


    // let verifyCode = new GVerify("v_container");
    // document.getElementById("my_button").onclick = function(){
    //     let res = verifyCode.validate(document.getElementById("code_input").value);
    //     let name = $("#account").val();
    //     let password = $("#password").val();
    //     let datas = {"account":name,"password":password};
    //     if(res){
    //         document.getElementById("verify_id").innerText="验证码正确"
    //         $.ajax({
    //             type:'post',
    //             url:'${path}/login/success?account='+name,
    //             data:datas,
    //             contentType:'application/json;charset=utf-8',
    //             success:function(data){
    //                 window.location.href='${path}/login/success?account='+name;
    //             }
    //         })
    //
    //     }else{
    //         document.getElementById("verify_id").innerText="验证码错误"
    //     }
    // }

    // function checkAll() {
    //     let name = $("#account").val();
    //     let password = $("#password").val();
    //     let datas = {"account":name,"password":password};
    //     $.post('${path}/login/selectaccount', datas, function (data) {
    //         if(data.code==200){
    //             document.getElementById("account_id").innerText="用户名可用"
    //             $.post('${path}/login/selectpassword', datas, function (data) {
    //                 if(data.code==200){
    //                     document.getElementById("password_id").innerText="密码正确"
    //                     $.ajax({
    //                         type:'post',
    //                         url:'${path}/login/success?account='+name,
    //                         data:datas,
    //                         contentType:'application/json;charset=utf-8',
    //                         success:function(data){
    //                             window.location.href='${path}/login/success?account='+name;
    //                         }
    //                     })
    //
    //                 }else {
    //                     document.getElementById("password_id").innerText="密码错误"
    //                 }
    //             })
    //         }else {
    //             document.getElementById("account_id").innerText="用户名不存在"
    //         }
    //     })
    // }

    // function checkpwd() {
    //     let name = $("#account").val();
    //     let password = $("#password").val();
    //     let datas = {"account":name,"password":password};
    //     $.post('${path}/login/selectpassword', datas, function (data) {
    //         if(data.code==200){
    //             document.getElementById("password_id").innerText="密码正确"
    //             $.ajax({
    //                 type:'post',
    //                 url:'${path}/login/success?account='+name,
    //                 data:datas,
    //                 contentType:'application/json;charset=utf-8',
    //                 success:function(data){
    //                     window.location.href='${path}/login/success?account='+name;
    //                 }
    //             })
    //
    //         }else {
    //             document.getElementById("password_id").innerText="密码错误"
    //         }
    //     })
    // }


</script>

</body>
</html>